<template>
  <div class="home">
    <main class="main">
      <div class="bg">
        <div class="top-bar">
          <div class="wrap">
            <div class="log"></div>
            <el-menu
              default-active="/business"
              mode="horizontal"
              background-color="transparent"
              text-color="#06080A"
              active-text-color="#fff"
            >
              <el-menu-item index="/business" @click="toBusiness">业务中心</el-menu-item>
              <el-menu-item @click="toMyBus">我的业务</el-menu-item>
            </el-menu>
            <div class="client-info">
              <div class="header" @click="showButton($event)"></div>
              <div class="welcome-text">欢迎 {{welcomText}} 客户</div>
              <div class="button-box" ref="clientButton">
                <el-menu default-active="activeIndex" active-text-color="#fff" router>
                  <el-menu-item :index="basicInfo" @click="changeState">基本信息</el-menu-item>
                  <el-menu-item :index="passwordPath" @click="changeState">密码管理</el-menu-item>
                  <el-menu-item index="/login" @click="clearToken">退出登录</el-menu-item>
                </el-menu>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="white"></div>
      <div class="business wrap">
        <div class="module">
          <el-card @click.native="cardRouter('/business/allBusiness/register?id=1')">
            <div class="icon icon-register"></div>
            <div class="icon-head">
              <h3>商标注册</h3>
              <span class="apply-know" target="blank" @click.stop="funs" >商标注册申请须知</span>
            </div>
            <el-dialog title="申请须知" :visible.sync="dialogVisible" append-to-body="true" :show-close="false">
              <div class="notice-img" v-for="(item, index) in images" :key="index">
                <img style="width:100%" :src="imagehttp + item" alt />/
              </div>

              <span slot="footer" class="dialog-footer">
                <el-button @click.stop="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.stop="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
          </el-card>
        </div>
        <div class="module">
          <el-card @click.native="cardRouter('/business/allBusiness/businessclou')">
          <div class="icon icon-later"></div>
          <h3>商标后续</h3>
        </el-card>
        <!--<el-card @click.native="cardRouter('/business/allBusiness/BashStep?id=25')">-->
          <!--<div class="icon icon-madirid"></div>-->
          <!--<h3>马德里申请</h3>-->
        <!--</el-card>-->
      </div>
      </div>
    </main>
    <base-footer></base-footer>
  </div>
</template>

<script>
import BaseFooter from "@/components/BaseComponents/Footer.vue";
import { mapMutations, mapState, mapGetters } from "vuex";
export default {
  data(){
    return{
      // 弹出
      dialogVisible: false,
      // 图片地址
      imagehttp: "",
      //图片数据
      images: [],
    }
  },
  name: "Home",
  methods: {
    funs(){
      this.dialogVisible = true,
      this.$http.get("/trademark/class/findImgById", {
        params: {
          id: 1,
        },
      }).then((res) => {
        if (res.data.code !== 200) return this.$message.error("获取图片失败");
        // this.imagehttp = res.config.baseURL + "/trademark";
        this.imagehttp = this.mconfig.host;
        this.images = res.data.data.split(",");
      });
    },
    ...mapMutations(["changeTopState", "changeAllBusState"]),
    // 点击头像显示
    showButton(e) {
      this.$refs.clientButton.style.height = "7.5rem";
      e.stopPropagation();
    },
    // 影藏按钮
    hiddenButton() {
      this.$refs.clientButton.style.height = "";
    },
    // 路由跳转+++
    toBusiness() {
      this.changeTopState("/business/allBusiness");
      this.$router.push(this.allBusState);
    },
    toMyBus() {
      this.changeTopState("/business/myBusiness");
      this.$router.push(this.myBusState);
    },
    cardRouter(path, style) {
      this.changeTopState("/business/allBusiness");
      this.changeAllBusState(path);
      this.$router.push(path);
    },
    // 改变状态
    changeState() {
      this.changeTopState("/business/allBusiness");
      this.changeAllBusState(this.basicInfo);
    },
    // 退出
    clearToken() {
      this.$http("/trademark/logout")
        .then(({ data: res }) => {
          this.$message.success("退出成功");
        })
        .finally(() => {
          this.hiddenButton();
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("store");
          this.$router.push("/login");
          this.$store.commit("resetState");
        });
    },
  },
  components: { BaseFooter },
  computed: {
    ...mapState(["allBusState", "myBusState"]),
    ...mapGetters(["basicInfo", "passwordPath", "welcomText"]),
  },
  created() {
    document.addEventListener("click", this.hiddenButton);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.hiddenButton);
  },
};
</script>
<style lang="less" scoped>
.module {
  float: left;
  // width: 580px;
  // height: 400px;
  // margin:0 20px;
  margin-top: -20px;
  box-sizing: border-box;
}
.module:nth-child(1){
  margin-right:40px;
}
.home {
  height: 100vh;
  display: flex;
  flex-grow: 1 ;
  flex-flow: column nowrap;
  .wrap {
    width: 60rem;
    margin: 0 auto;
  }
  .main {
    height: 100%;
    // flex: auto;
    // flex: 2;
    position: relative;
    display: flex;
    flex-grow: 1 ;
    flex-flow: column nowrap;
    .bg {
      height: 71%;
      // flex: 7.1;
      background: url(../assets/imgs/home/bg.png) center no-repeat;
      background-size: cover;
      .top-bar {
        height: 3rem;
        background-color: rgba(255, 255, 255, 0.7);
      }
      .wrap { 
        height: inherit;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        .log {
          width: 10.6rem;
          height: 3.9rem;
          background: url(../assets/imgs/home/brand-log.png) center no-repeat;
        }
        .el-menu {
          margin-left: 3rem;
          height: 100%;
          border: none;
          .el-menu-item {
            border: none;
            height: 100%;
            line-height: 3rem;
            font-size: 1.45em;
          }
          .el-menu-item:not(.is-disabled):hover {
            background-color: #013d87 !important;
            color: white !important;
          }
          .is-active {
            background-color: #013d87 !important;
          }
        }
        .client-info {
          margin-left: auto;
          position: relative;
          .header {
            width: 2.5rem;
            height: 2.5rem;
            float: right;
            background: url(../assets/imgs/business/head.png);
          }
          .welcome-text {
            margin-right: 3.1rem;
            line-height: 2.5rem;
            font-size: 1.2em;
            color: #06080a;
          }
          .button-box {
            position: absolute;
            top: 2.8rem;
            right: 0;
            transition: height 0.3s;
            height: 0;
            overflow: hidden;
            z-index: 99;
            .el-menu {
              margin: 0;
              width: 5rem;
              font-size: 1.2em;
              .el-menu-item {
                color: #666666;
                text-align: center;
                height: 2.5rem;
                line-height: 2.5rem;
                font-size: 1em;
                border-bottom: 1px solid #cccccc;
              }
              .el-menu-item:last-child {
                border: none;
              }
            }
          }
        }
      }
    }
    .white {
      flex: 3;
    }
    .business {
      position: absolute;
      display: flex;
      justify-content: space-around;
      // padding:0 50px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
      
      margin-top: 40vh;
      @media screen and (max-height:768px){
          margin-top: 30vh;
        }
        @media screen and (min-height:1100px){
          margin-top: 45vh;
        }
        @media screen and (min-height:1300px){
          margin-top: 50vh;
        }
        @media screen and (min-height:1500px){
          margin-top: 55vh;
        }
      .el-card {
        float: left;
        width: 27rem;
        height: 23rem;
        max-height: 20rem;
        margin-right: 1.5rem;
        border-radius: 0.4rem;
        position: relative;
        background-color: #1890FF;
        border: none;
        display: flex;
        flex-grow: 1 ;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        cursor: pointer;
        @media screen and (max-width: 1200px){
          width: 400px;
          height: 290px;
        }

        /deep/.el-card__body{
          display: flex;
          align-items: center;
          h3{
            margin: 0;
          }
        }
        .apply-know{
          color: #fff;
          font-size: 14px;
          &:hover{
            color: #d4d4d4;
            text-decoration: none;
          }
        }
        .icon {
          margin-right: 31px;
        }
        h3 {
          font-size: 2rem;
          margin-top: 0.6rem;
          margin-bottom: .3em;
        }
        p {
          font-size: 1em;
          margin-top: 0.2em;
        }
      }
      .el-card:hover{
        background-color:#65B6FF;
      }
      .el-card:last-child {
        margin-right: 0;
      }

      .el-card::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 8.1rem;
        height: 9.1rem;
        background: url(../assets/imgs/home/card-bg2.png) no-repeat;
        background-size: cover;
      }
      .el-card::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 3.5rem;
        height: 4.6rem;
        background: url(../assets/imgs/home/card-bg1.png) no-repeat;
        background-size: cover;
      }
      .icon-register {
        width: 4rem;
        height: 3.9rem;
        background: url(../assets/imgs/home/register.png) center no-repeat;
        background-size: contain;
      }
      .icon-head{
        h3{
          font-size: 42px;
        }
      }
      .icon-later {
        width: 3.6rem;
        height: 4.1rem;
        background: url(../assets/imgs/home/later.png) center no-repeat;
        background-size: contain;
      }
      .icon-madirid {
        width: 4rem;
        height: 3.7rem;
        background: url(../assets/imgs/home/madirid.png) center no-repeat;
        background-size: contain;
      }
    }
  }
}
</style>
